<div class="modal fade" id="district-form">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="district">
                @if(isset($id))
                    <input type="hidden" name="id" value="{{$id or ''}}">
                @endif
                <div class="modal-header">
                    <h4 class="modal-title">{{isset($id)?'修改地区信息':'添加地区'}}</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">地区名:</label>
                        <input type="text" name="name" value="{{$district->name or ''}}" class="form-control" id="name">
                        <template v-if="form.errors.name"><span class="text-danger" >@{{form.errors.name[0]}}</span></template>
                    </div>
                    <div class="form-group">
                        <label for="initial">首字母:</label>
                        <input type="text" class="form-control" name="initial" id="initial" value="{{$district->initial or ''}}" >
                    </div>
                    <div class="form-group">
                        <label for="initials">简拼:</label>
                        <input type="text" class="form-control" name="initials" value="{{$district->initials or ''}}"  id="initials">
                    </div>
                    <div class="form-group">
                        <label for="domain_prefix">域名前缀:</label>
                        <input type="text" class="form-control" name="domain_prefix" value="{{$district->domain_prefix or ''}}"  id="domain_prefix">
                    </div>
                    <div class="form-group">
                        <label for="suffix">单位:</label>
                        <input type="text" class="form-control" name="suffix" value="{{$district->suffix or ''}}"  id="suffix">
                    </div>
                    <div class="form-group">
                        <label for="code">区域编码:</label>
                        <input type="text" class="form-control" name="code" value="{{$district->code or ''}}"  id="code">
                    </div>
                    <div class="form-group">
                        <label for="area_code">区号:</label>
                        <input type="text" class="form-control" name="area_code" value="{{$district->area_code or ''}}"  id="area_code">
                    </div>
                    <div class="form-group">
                        <label for="extra">额外补充信息:</label>
                        <input type="text" class="form-control" name="extra" value="{{$district->extra or ''}}"  id="extra">
                    </div>
                    @if(isset($parentid))
                        <input type="hidden" name="parentid" value="{{$parentid}}" />
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="submitForm()">保存</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    new Vue({
        el:'#district-form',
        mounted() {
            //this.getData();
        },
            data() {
                return {
                    form:{
                        field:{

                        },
                        errors:{}
                    },
                }
            },
        methods:{
            submitForm() {
                axios.post('{{route('admin.district.save')}}',$('form.district').serialize()).then((response) => {
                    if (response.status) {
                        $('#district-form').modal('hide');
                        window.location.reload();
                    }
                }).catch((error) => {
                    if (error.response.status == 422) {
                        this.form.errors = error.response.data.errors;
                    }
                });
            },
        }
    });
</script>
